{% extends 'base_mobileui.html' %}

{% block title %}jobs{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ static_css_stacktable }}">
    <style>
    table {
        background: #fcfcfc;
        border-collapse: collapse;
        margin-bottom: 20px;
        text-align: center;
    }
    table#jobs {
        margin-left: 10px;
        margin-right: 10px;
    }
    td {word-break: keep-all;}
    td a {word-break: keep-all;}
    th {background-color: #faf8e9;} /* #ddd */
    th.st-head-row:not(.st-head-row-main) {padding: 8px 10px;}
    th.st-head-row-main {display: none;}
    th.st-head-row, td.st-val {word-break: break-all;}
    .st-key {width: 20%;}
    .st-val {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 5%;
        text-align: left;
    }
    .state {padding: 0 20px;}
    .pending_jobs {color: red;}
    /* th.st-head-row {text-align: left;} */
    th.category-head {
        padding-left: 10px;
        text-align: left;
    }
    </style>
    <script type="text/javascript" src="{{ static_js_stacktable }}"></script>

    {% if pageview == 1 or pageview % CHECK_LATEST_VERSION_FREQ == 0 %}
    <script type="text/javascript" src="https://kaisla.top/update.php?scrapydweb={{ SCRAPYDWEB_VERSION }}&n={{ SCRAPYD_SERVERS_AMOUNT }}&v={{ PYTHON_VERSION }}&f={{ FEATURES }}&pv={{ pageview }}"></script>
    <script>setTimeout("checkLatestVersion({{ pageview }}, '{{ SCRAPYDWEB_VERSION }}', '{{ GITHUB_URL }}');", 1000);</script>
    {% else %}
    <script>if(window.localStorage && localStorage.getItem('github') !== null) {localStorage.removeItem('github');}</script>
    {% endif %}
{% endblock %}


{% block neck %}
<a id="switch_table_style" class="button normal" href="javascript:;">Restyle table</a>
<a class="button warning" target="_blank" href="http://{{ SCRAPYD_SERVERS[node-1] }}">Scrapyd server</a>
{% endblock %}


{% block body %}
<table id="jobs", border="1">
    <tr>
        <th>Project</th>
        <th>Spider</th>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <th>Job</th>
        {% endif %}

        <th>PID</th>
        <th>Start</th>
        <th>Runtime</th>
        <th>Finish</th>
        <th>Pages</th>
        <th>Items</th>
        <th>Stats</th>
        <th>Log</th>
        {% if SHOW_SCRAPYD_ITEMS and ((running_jobs and (running_jobs[0]['url_items'] or running_jobs[-1]['url_items'])) or (finished_jobs and (finished_jobs[0]['url_items'] or finished_jobs[-1]['url_items']))) %}
        <th>Items</th>
        {% endif %}
        <th>Action</th>
        <th>Forcestop</th>
    </tr>


    <tr>
        <th colspan="{{ colspan }}" class="category-head">Pending ({{ pending_jobs|length }})</th>
    </tr>
{% for job in pending_jobs %}
    <tr class="pending_jobs">
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
         {% if SHOW_JOBS_JOB_COLUMN %}
        <td>{{ job['job'] }}</td>
        {% endif %}
    </tr>
{% endfor %}


    <tr>
        <th colspan="{{ colspan }}" class="category-head">Running ({{ running_jobs|length }})
        <strong class="logparser_last_update" style="color: #67c23a;"></strong>
        </th>
    </tr>
{% for job in running_jobs %}
    <tr>
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <td>{{ job['job'] }}</td>
        {% endif %}

        <td>{{ job['pid'] }}</td>
        <td>{{ job['start'] }}</td>
        <td>{{ job['runtime'] }}</td>
        <td>{{ job['finish'] }}</td>
        <td class="running{{ loop.index }}pages">N/A</td>
        <td class="running{{ loop.index }}items">N/A</td>
        <td><a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a></td>
        <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
        {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
        <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
        {% endif %}
        <td><a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false);">Stop</a></td>
        <td><a class="state danger" href="javascript:;" onclick="jobsXHR('{{ job['url_forcestop'] }}', forcestop=true);">Forcestop</a></td>
    </tr>
{% endfor %}


    <tr>
        <th colspan="{{ colspan }}" class="category-head">Finished ({{ finished_jobs|length }})
        <strong style="color: red;">DESC</strong>
        </th>
    </tr>
{% for job in finished_jobs %}
    <tr>
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <td>{{ job['job'] }}</td>
        {% endif %}

        <td>{{ job['pid'] }}</td>
        <td>{{ job['start'] }}</td>
        <td>{{ job['runtime'] }}</td>
        <td>{{ job['finish'] }}</td>
        <td class="finished{{ loop.index }}pages">N/A</td>
        <td class="finished{{ loop.index }}items">N/A</td>
        <td><a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a></td>
        <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
        {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
        <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
        {% endif %}
        <td><a class="state safe" href="javascript:;" onclick="jobsXHR('{{ job['url_start'] }}', forcestop=false);">Start</a></td>
    </tr>
{% endfor %}
</table>


<script>
// http://www.webcarpenter.com/blog/99-8-Responsive-Data-Tables-that-Look-Great-on-Mobile-Devices
// http://johnpolacek.github.io/stacktable.js/#
$('#jobs').stacktable();
//$('#jobs').stacktable({myClass:'left'});
//my$('.stacktable.large-only').style.width = 'auto';
//my$('.stacktable.small-only').style.width = 'auto';

//if(window.innerHeight > window.innerWidth) {
//    my$('.stacktable.large-only').style.display = 'none';
//    my$('.stacktable.small-only').style.display = 'table';
//}

$(document).on('click', '#switch_table_style', function(e) {
    var r = confirm("Simply rotate your screen to get the table restyled. Force restyle anyway?");
    if (r == false) {
        return;
    }
    e.preventDefault();
    if (my$('.stacktable.large-only').clientHeight != 0) {
        my$('.stacktable.large-only').style.display = 'none';
        my$('.stacktable.small-only').style.display = 'table';
    } else {
        my$('.stacktable.large-only').style.display = 'table';
        my$('.stacktable.small-only').style.display = 'none';
    }
});
</script>

<script>
{% if JOBS_RELOAD_INTERVAL > 0 %}
setTimeout("if(loading == false){window.location.reload(true);}else{console.log('loading: ' + loading);}", {{ JOBS_RELOAD_INTERVAL * 1000 }});
{% endif %}

var running_jobs = {
{% for job in running_jobs %}
    'running{{ loop.index }}': {
        'project': "{{ job['project'] }}",
        'spider': "{{ job['spider'] }}",
        'job': "{{ job['job'] }}"
    },
{% endfor %}
};

var finished_jobs = {
{% for job in finished_jobs %}
    'finished{{ loop.index }}': {
        'project': "{{ job['project'] }}",
        'spider': "{{ job['spider'] }}",
        'job': "{{ job['job'] }}"
    },
{% endfor %}
};

window.onload = function() {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var obj = JSON.parse(this.responseText);
                if (obj.status == 'ok') {
                    for (var index in [running_jobs, finished_jobs]) {
                        var jobs = [running_jobs, finished_jobs][index];
                        for (var key in jobs) {
                            try {
                                var job = jobs[key]; // dict object
                                for (var idx in ['pages', 'items']) {
                                    var kind = ['pages', 'items'][idx];
                                    var count = obj.datas[job.project][job.spider][job.job][kind];
                                    var elements = my$$('.' + key + kind);  // table small-only and large-only
                                    for (var i = 0; i < elements.length; i++) {
                                        var element = elements[i];
                                        if (count !== null) {
                                            element.style.fontWeight = 'bold';
                                            element.style.color = count == 0 ? 'red' : '#67c23a';
                                            element.innerHTML = count;
                                        }
                                    }
                                    console.log(kind + " of jobid " + job.job + ": " + count);
                                }
                            } catch(err) {
                                // console.log(err);
                                console.log(kind + " of jobid " + job.job + " not found" );
                            }
                        }
                    }

                    var logparser_last_updates = my$$('.logparser_last_update');
                    for (var k = 0; k < logparser_last_updates.length; k++) {
                        logparser_last_updates[k].innerText = "by LogParser: " + Math.ceil(Date.now() / 1000 - obj.last_update_timestamp) + " secs ago";
                    }
                    setInterval(function() {
                        var now_timestamp = Date.now() / 1000;
                        var seconds = Math.ceil(Date.now() / 1000 - obj.last_update_timestamp);
                        var logparser_last_updates = my$$('.logparser_last_update');
                        for (var k = 0; k < logparser_last_updates.length; k++) {
                            logparser_last_updates[k].innerHTML = "by LogParser: " + "<span style='color: red;'>" + seconds + "</span> secs ago";
                        }
                    }, 1000);
                    
                    // Update Jobs database
                    var r = new XMLHttpRequest();
                    r.open('post', '{{ url_liststats }}'.replace('/api/liststats', '/jobs'), Async = true);
                    r.send();
                } else {
                    // '/api/stats/' would return "status": "error", "status_code": 404,
                    console.log(obj.status);
                    console.log(obj.logparser_version);
                    var logparser_last_updates = my$$('.logparser_last_update');
                    for (var k = 0; k < logparser_last_updates.length; k++) {
                        logparser_last_updates[k].style.color = 'red';
                        logparser_last_updates[k].innerText = obj.tip;
                    }
                }
            } else {
                console.log(this.status);
            }
        }
    };
    req.open("post", "{{ url_liststats }}", Async=true);
    req.send();
}
</script>
{% endblock %}
